<template>
	<view class="comAll">
		<view class="title">
			<text>{{info.name}}提报</text>
		</view>
		<view class="content">
			<view>
				<text class="textLeft">食材名称</text>
				<text class="textRight">{{info.name}}</text>
			</view>
			<view>
				<text class="textLeft">食材产地</text>
				<text class="textRight">{{info.place_of_origin}}</text>
			</view>
			<view>
				<text class="textLeft">采购单价</text>
				<text class="textRight">{{info.price}}</text>
			</view>
			<view>
				<text class="textLeft">包装规格</text>
				<text class="textRight">{{info.specification}}</text>
			</view>
			<view>
				<text class="textLeft">采购单位</text>
				<text class="textRight">{{info.units}}</text>
			</view>
			<view>
				<text class="textLeft">包装方式（内）</text>
				<text class="textRight">{{info.inside_packing}}</text>
			</view>
			<view>
				<text class="textLeft">包装方式（外）</text>
				<text class="textRight">{{info.external_packing}}</text>
			</view>
			<view>
				<text class="textLeft">发货方式</text>
				<text class="textRight">{{info.distribution_type}}</text>
			</view>
			<view>
				<text class="textLeft">发货时效</text>
				<text class="textRight">{{info.delivery_time}}</text>
			</view>
			<view>
				<text class="textLeft">月供应量</text>
				<text class="textRight">{{info.supply}}</text>
			</view>
			<view>
				<text class="textLeft">供应周期</text>
				<text class="textRight">{{info.cycle}}</text>
			</view>
			<view>
				<text class="textLeft">储存方式</text>
				<text class="textRight">{{info.environment}}</text>
			</view>
			<view>
				<text class="textLeft">保质期</text>
				<text class="textRight">{{info.shelf_life}}</text>
			</view>
			<view>
				<text class="textLeft">品质描述</text>
				<text class="textRight">{{info.describe}}</text>
			</view>
			<view>
				<text class="textLeft">备注</text>
				<text class="textRight">{{info.remark}}</text>
			</view>
		</view>
		<view class="imgView">
			<view class="img" :style="'background-image:url('+info.all_photo+')'" @click="previewImage([info.all_photo, info.inside_photo, info.external_photo], info.all_photo)"></view>
			<view class="img" :style="'background-image:url('+info.inside_photo+')'" @click="previewImage([info.all_photo, info.inside_photo, info.external_photo], info.inside_photo)"></view>
			<view class="img" :style="'background-image:url('+info.external_photo+')'" @click="previewImage([info.all_photo, info.inside_photo, info.external_photo], info.external_photo)"></view>
		</view>
	</view>
</template>

<script>
	import { previewImage } from '@/utils/tools.js'
	export default {
		props: {
			info: Object,
		},
		data() {
			return {}
		},
		methods:{
			previewImage,
		}
	}
</script>

<style scoped>
	.comAll{
		background-color: #FFF;
		box-shadow: 0 0 15upx 5upx rgba(240, 61, 61, 0.15);
		padding: 30upx;
		height:100%;
		border-radius: 10upx;
		margin: 17upx 0;
	}
	.title{
		text-align: center;
		font-size: 36upx;
		color:#333333;
		font-weight: bold;
		padding-bottom: 20upx;
	}
	.content{
		font-size: 32upx;
		color:#6F6F6F;
	}
	.content view{
		display: flex;
		margin-bottom: 20upx;
	}
	.content view text{
		display: inline-block;
		word-wrap: break-word;
	}
	.textLeft{
		width:40%;
	}
	.textRight{
		width:60%;
	}
	.imgView{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.img{
		width:208upx;
		height:208upx;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
</style>
